{{> page_top}}

<div class="application">
    <form id="regexp-form">
        <textarea id="regexp-input" autofocus="autofocus"
                  placeholder="输入 JavaScript 风格的正则表达式来显示"></textarea>
        <!--    <button type="submit">Display</button>-->

        <ul class="inline-list">
            <li class="download-svg">
                <a href="#" class="inline-icon" data-action="download-svg" download="image.svg"
                   type="image/svg+xml">{{icon "#data-transfer-download"}}下载 SVG</a>
            </li>
            <li class="download-png">
                <a href="#" class="inline-icon" data-action="download-png" download="image.png" type="image/png">{{icon
                        "#data-transfer-download"}}下载 PNG</a>
            </li>
            <li class="permalink">
                <a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}永久链接</a>
            </li>
        </ul>
    </form>
</div>

<div class="results">
    <div id="error"></div>

    <ul id="warnings"></ul>

    <div id="regexp-render"></div>
</div>
<style>
    .verification {
        display: none;
    }
    .verification > label > textarea {
        margin-top: 15px;
        margin-bottom: 15px;

    }

    .result > button {
        box-shadow: rgb(66 185 131) 1px 2px 3px;
        border-radius: 4px;
        font-size: 1em;
        line-height: 1.5em;
        width: 100px;
        border: 0 none;
        background: #fff;
        padding: 10px;
        float: left;
    }

    .result {
        display: flex;
        justify-content: space-between;
    }

    button.error {
        color: red;
        font-weight: bold;
        font-size: 1em;
    }

    button.success {
        color: green;
        font-weight: bold;
        font-size: 1em;
    }

    .has-results div.verification {
        display: block;
    }

    .has-error div.verification {
        display: none;
    }
</style>
<div class="verification application">
    <label>
        <textarea id="verification-input" type="text"
                  placeholder="输入要匹配的字符串"></textarea>

    </label>
    <div class="result">
        <button hidden disabled class="success">
            通过
        </button>
        <button hidden disabled class="error">
            不通过
        </button>
        <button hidden class="btn-clear" id="verification-input-clear">
            清空
        </button>
    </div>

</div>

{{> page_bottom}}
